<template>
  <div class="container">
        <div >
          <el-row class="articleStyle">
          <el-col :span="6">【题型】: <span>{{artData.questionType |formatterQueType}}</span> </el-col>
          <el-col :span="6">【编号】: <span>{{artData.id}}</span></el-col>
          <el-col :span="6">【难度】: <span>{{artData.difficulty|formatterDiff}}</span></el-col>
          <el-col :span="6">【标签】: <span>{{artData.tags}}</span></el-col>
        </el-row>
          <el-row class="articleStyle">
          <el-col :span="6">【学科】: <span>{{artData.subjectName}}</span> </el-col>
          <el-col :span="6">【目录】: <span>{{artData.directoryName}}</span></el-col>
          <el-col :span="6">【方向】: <span>{{artData.direction}}</span></el-col>
        </el-row>
        <hr>
        <!-- 题干部分 -->
        【题干】:
        <p class="testColor" v-html="artData.question"></p>
        <!-- 选项区域 用组件 -->
        <!-- 单选区域 -->

       <div v-if="artData.questionType==='1'||artData.questionType==='单选'" class="xuanxiangStyle">
          <p>{{artData.questionType |formatterQueType}}题 选项：（以下选中的选项为正确答案）</p>
          <el-radio-group  :value="isRight" class="option">
            <el-radio class="xuanxiangStyle" v-for="item in item in artData.options" :key="item.id" :label="item.isRight">{{item.title}}</el-radio>
          </el-radio-group>

       </div>

        <!-- 多选区域 -->
        <div v-if="artData.questionType==='2'||artData.questionType==='多选'">
          <p>{{artData.questionType |formatterQueType}}题 选项：（以下选中的选项为正确答案）</p>
           <el-checkbox-group  :value="isRightList" class="option">
             <el-checkbox v-for="item in artData.options" :key="item.id" :label="item.isRight"></el-checkbox>
           </el-checkbox-group>
        </div>

        <!-- 简答区域 -->
        <div  v-if="artData.questionType==='3'||artData.questionType==='简答'">
        </div>
        <hr>
        <div>

        【参考答案】:  <el-button type="danger" @click="showVideo=true">视频答案预览</el-button>
        <div class="video" v-if="showVideo&&artData.videoURL!=null&&artData.videoURL.split('.')[1] == 'mp4'">
          <video autoplay  :src="artData.videoURL" controls="controls"></video>
        </div>
        </div>
        <hr>
        <div class="answer">
          【答案解析】: <div class="answer" v-html="artData.answer"></div>
        </div>
        <hr>
        【题目备注】: <span>{{artData.remarks}}</span>
        </div>
  </div>
</template>
<script>
import { detail } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'

export default {
  name: 'articleViews',
  props: {
    articleId: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      // 试题详情
      artData: {},
      isRight: 1,
      isRightList: [1],
      showVideo: false
    }
  },
  created () {
    this.getArtDetail()
  },
  filters: {
    // 转换题型
    formatterQueType (value) {
      const valueList = questionType.find(
        (item) => item.value === Number(value)
      )
      if (value === '1' || value === '2' || value === '3' || value === 1 || value === 2 || value === 3) {
        return valueList.label
      } else {
        return value
      }
    },
    // 将难度转换成正常的汉字
    formatterDiff (value) {
      const valueList = difficulty.find(
        (item) => item.value === Number(value)
      )
      if (value === '1' || value === '2' || value === '3' || value === 1 || value === 2 || value === 3) {
        return valueList.label
      } else {
        return value
      }
    }
  },
  methods: {
    // 获取文章详情
    async getArtDetail () {
      const res = await detail({ id: this.articleId })
      this.artData = res.data
    }
  }
}
</script>
<style scoped >
::v-deep input.el-input__inner {
    border: none;
}
.articleStyle{
  margin-bottom: 20px;
}
.testColor{
  color: blue;
}
.xuanxiangStyle {
    display: flex;
    flex-direction: column;
}
.resultStyle{
  margin-top: 1px;
  margin-bottom: 20px;
  /* pointer-events: none;
  cursor: pointer; */
  /* /* color: #409eff !important; */

}
.answer {
    display: inline-block;
}
.video{
  width: 400px;
  height: 300px;

}
video{
  width: 100%;
  height: 100%;
}
</style>
